<!--
 * @description: 
 * @Date: 2022-11-04 16:09:03
 * @LastEditTime: 2022-11-23 20:19:11
-->
<template>
  <div class="onlinemall">
    <div class="absolute -top-6">
      <el-input
        v-model="name"
        class="w-50 iconSearch"
        size="small"
        placeholder="搜索标签"
        :suffix-icon="Search"
        @keydown.enter="start"
      />
    </div>
    <div class="linkarea space-x-2">
      <div
        :class="item == area ? 'text-rose-600' : ''"
        v-for="item in [
          '系统',
          '推荐',
          '在线工具',
          '资讯',
          '开发',
          '设计',
          '效率',
          '娱乐',
          '社交',
          '阅读',
          '金融',
          '综合',
        ]"
        @click="swipe(item)"
      >
        {{ item }}
      </div>
    </div>
    <div class="linkscroll">
      <div class="linklist grid grid-cols-3 mt-2">
        <div v-for="item in list" :key="item.id">
          <div class="links">
            <img :src="item.src" class="linklogo" />
            <div class="linkTips">
              <span class="text-sm font-bold">{{ item.name }}</span>
              <div class="text-xs">{{ item.tips }}</div>
            </div>
          </div>
          <div class="mt-2 flex items-center justify-end">
            <el-icon
              size="20px"
              class="hover:text-blue-400 hover"
              @click="redirectUrl(item.url, true)"
            >
              <Link />
            </el-icon>
            <el-button size="small" class="ml-2" round @click="add(item)">添加</el-button>
          </div>
        </div>
      </div>
      <div class="flex justify-center">
        <el-pagination
          v-if="total > 15"
          layout="prev, pager, next"
          :page-size="15"
          :total="total"
          @current-change="loadmore"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { Link, Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useStore } from "vuex";
import ajax from "../../../util/ajax";
import redirectUrl from "../../../util/href";
import { getUUID } from "../../../util/tools";
const store = useStore();
const area = ref("系统");
const name = ref("");
const page = ref(1);
const total = ref(0);
const list = ref([]);
const swipe = (item) => {
  if (item != area.value) {
    area.value = item;
    page.value = 1;
    start();
  }
};
const start = () => {
  ajax({
    url: "/LinkStore/list",
    params: { area: area.value, name: name.value, page: page.value },
  }).then((el) => {
    list.value = el.data.data;
    total.value = el.data.total;
  });
};
const loadmore = (event) => {
  page.value = event;
  start();
};
const add = (item) => {
  let info = {
    sort: 99999,
    id: getUUID(),
    name: item.name,
    size: item.size,
    src: item.src,
    url: item.url,
    type: item.type,
  };
  store.state.link.push(info);
  store.commit("updateLink");
};
start();
</script>
<style lang="less">
.onlinemall {
  position: relative;
  width: 100%;
  height: 100%;
}

.iconSearch {
  > .el-input__wrapper {
    border-radius: 30px;
  }
}

.linkscroll {
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 50px);
}

.linklist {
  grid-gap: 10px;
  > div {
    height: 100px;
    border-radius: 8px;
    background-color: rgba(240, 240, 240, 0.808);
    padding: 10px;

    > .links {
      display: flex;

      > .linklogo {
        flex-shrink: 0;
        border-radius: 15px;
        width: 50px;
        height: 50px;
        display: block;
      }

      > .linkTips {
        margin-left: 10px;
        display: flex;

        > div {
          text-overflow: ellipsis;
          height: 32px;
          overflow: hidden;
        }

        flex-direction: column;
      }
    }
  }
}

.linkarea {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  overflow-y: scroll;

  > div {
    cursor: pointer;
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 20px;
    display: flex;
    background-color: rgb(243, 243, 243);

    &:hover {
      color: rgb(4, 163, 255);
    }
  }
}
</style>
